<template>
  <div>
    <el-row>
      <el-col :xs="24" :sm="18" :md="18" :lg="18" :xl="18">
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="商品分类">
            <el-select style="width:120px;" v-model="form.gc_id1" placeholder="请选择" @change="classChange">
              <el-option v-for="item in class1" :key="item.id" :label="item.category_name" :value="item.id">
              </el-option>
            </el-select>

            <el-select style="width:120px;" v-show="class2.length" v-model="form.gc_id2" @change="classChange1" placeholder="请选择">
              <el-option v-for="item in class2" :key="item.id" :label="item.category_name" :value="item.id">
              </el-option>
            </el-select>
            <el-select style="width:120px;" v-show="class3.length" v-model="form.gc_id3" @change="classChange2" placeholder="请选择">
              <el-option v-for="item in class3" :key="item.id" :label="item.category_name" :value="item.id">
              </el-option>
            </el-select>

          </el-form-item>

          <el-form-item label="商品名称">
            <el-input v-model="form.goods_name" placeholder="请输入商品名称"></el-input>
          </el-form-item>
          <el-form-item label="商品价格">
            <el-input v-model="form.goods_price" placeholder="请输入商品价格"></el-input>
          </el-form-item>
          <el-form-item label="市场价格">
            <el-input v-model="form.goods_marketprice" placeholder="请输入市场价格"></el-input>
          </el-form-item>
          <el-form-item label="成本价">
            <el-input v-model="form.goods_costprice" placeholder="请输入成本价"></el-input>
          </el-form-item>

          <el-form-item label="商品主图">
            <div v-show="form.goods_image">
              <img :src="form.goods_image" width="128px" />
            </div>
            <upload :size="32" :uptype="2" :uploadType="'2'" @showImg="showImg"></upload>
          </el-form-item>
          <el-form-item label="规格" v-show="specArr && specArr.length">
            <el-row v-for="(spec,index) in specArr" :key="index">
              <el-col :span="3">{{spec.spec_name}}</el-col>
              <el-col :span="21">
                <el-checkbox v-for="(value,i) in spec.spec_value" v-model="specArr[index]['spec_value'][i]['checked']" @change="specChange" :key="i">
                  {{value.show_name}}
                </el-checkbox>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="规格配置" v-show="checkedSpec && checkedSpecValue">
            <el-row>
              <el-col :span="4" v-for="(title,tindex) in checkedSpec" :key="tindex" v-if="title">
                {{title.spec_name}}
              </el-col>
              <el-col :span="4" v-show="checkedSpec && checkedSpec.length">
                价格 <i class="iconfont icon-xiugai-copy" @click="editPrice"></i>
              </el-col>
              <el-col :span="4" v-show="checkedSpec && checkedSpec.length">
                库存 <i class="iconfont icon-xiugai-copy" @click="editStock"></i>
              </el-col>

            </el-row>
            <el-row v-for="(item,index) in checkedSpecValue" :key="index">
              <div v-for="(valItem,i) in item" :key="i">
                <el-col :span="4" v-show="valItem.spec_val">
                  {{valItem.spec_val}}
                </el-col>

                <el-col :span="4" v-show="valItem.price!=undefined">
                  <el-input style="width:80px" v-model="checkedSpecValue[index][i].price"></el-input>
                </el-col>
                <el-col :span="4" v-show="valItem.storage!=undefined">
                  <el-input style="width:80px" v-model="checkedSpecValue[index][i].storage" @input="caluStorage"></el-input>
                </el-col>
              </div>

            </el-row>
          </el-form-item>
          <el-form-item label="商品库存">
            <el-input :disabled="storageDis" v-model="form.goods_storage" placeholder="请输入商品库存"></el-input>
          </el-form-item>
          <el-form-item label="库存报警值">
            <el-input v-model="form.goods_storage_alarm" placeholder="请输入库存报警值"></el-input>
          </el-form-item>
          <el-form-item label="运费">
            <el-input v-model="form.goods_freight" placeholder="请输入运费"></el-input>
          </el-form-item>
          <el-form-item label="推荐商品">
            <el-radio v-model="form.goods_commend" label="1">是</el-radio>
            <el-radio v-model="form.goods_commend" label="0">否</el-radio>
          </el-form-item>
          <el-form-item label="商品发布">
            <el-radio v-model="form.goods_state" label="1">立即发布</el-radio>
            <el-radio v-model="form.goods_state" label="0">放入仓库</el-radio>
          </el-form-item>
          <el-form-item label="">
            <el-button :loading="ifload" type="primary" @click="saveGoods">保存</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <!-- 编辑弹出框 -->
    <el-dialog :title="'批量修改'+editLabel" :visible.sync="editVisible" width="30%">
      <el-row>
        <el-col :span="6" style="text-align:center;">{{editLabel}}</el-col>
        <el-col :span="18">
          <el-input v-model="eidtVal"></el-input>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>

    <loading :ifload="ifload"></loading>
  </div>
</template>

<script type="text/javascript">
import loading from '@/components/utils/loading';
import upload from '@/components/utils/upload';
export default {
  components: { loading, upload },
  props: {
    goodsCommonid: { type: Number, default: 0 },
  },
  data() {
    return {
      ifload: false,
      form: {
        goods_commonid: 0,
        gc_id: '',
        gc_id1: '',
        gc_id2: '',
        gc_id3: '',
        goods_name: '',
        goods_image: '',
        goods_price: '',
        goods_costprice: '',
        goods_marketprice: '',
        goods_storage: 0,
        goods_storage_alarm: 0,
        goods_state: '1',
        type_id: 0,
        goods_freight: 0,
        goods_commend: '',
      },
      oldGcId: 0,
      class1: [],
      class2: [],
      class3: [],
      curClass: [],
      specArr: [], //组规格
      checkedSpec: [], //选中的规格
      checkedSpecValue: [], //选中的规格值组合

      storageDis: false,
      editVisible: false,
      editLabel: '价格',
      eidtVal: 0,
      editType: 'price',
    }
  },
  created() {
    this.$nextTick(() => {
      this.getClass(0, 0);
      this.form.goods_commonid = this.goodsCommonid;
      this._initGoodsData();
    })
  },
  methods: {
    //获取产品初始信息
    _initGoodsData() {
      if (!this.goodsCommonid) return false;
      let param = { goods_commonid: this.goodsCommonid };
      console.log(param);
      this.$post_('goods/goods/get_goodscommon_detail', param, (res) => {
        console.log(res);
        this.ifload = false;
        this.oldGcId = res.data.gc_id;
        this.goods_commonid = res.data.goods_commonid;
        this.form.gc_id = res.data.gc_id;
        this.form.gc_id1 = res.data.gc_id1;
        this.form.gc_id2 = res.data.gc_id2;
        this.form.gc_id3 = res.data.gc_id3;
        this.form.goods_name = res.data.goods_name;
        this.form.goods_image = res.data.goods_image;
        this.form.goods_price = res.data.goods_price;
        this.form.goods_costprice = res.data.goods_costprice;
        this.form.goods_marketprice = res.data.goods_marketprice;
        this.form.goods_storage = res.data.goods_storage;
        this.form.goods_storage_alarm = res.data.goods_storage_alarm;
        this.form.goods_state = res.data.goods_state;
        this.form.type_id = res.data.type_id;
        this.form.goods_freight = res.data.goods_freight;
        this.form.goods_commend = res.data.goods_commend;
        this.checkedSpec = res.data.checked_spec;
        this.checkedSpecValue = res.data.checked_spec_value;
        if (this.form.gc_id1 > 0) this.getClass(this.form.gc_id1, 1);
        if (this.form.gc_id2 > 0) this.getClass(this.form.gc_id2, 2);
        if (this.form.gc_id3 > 0) this.getClass(this.form.gc_id3, 3);


      })

    },

    //获取分类
    getClass(pid, level) {
      //   this.ifload = true;
      // this.$post_('goods/goods-class/get_class',{parent_id:pid},(res) =>{
      // 	this.ifload = false;
      // 	if(res.data.length){
      // 		if(level==0){
      // 			this.class1 = res.data;
      // 		}else if(level==1){
      // 			this.class2 = res.data;
      // 		}else if(level==2){
      // 			this.class3 = res.data;
      // 		}
      // 	}else{
      // 		//检查是否有分类规格
      // 		this.showSpec();
      // 	}
      // })

    },

    //显示图片
    showImg(imgUrl) {
      console.log(imgUrl);
      this.form.goods_image = imgUrl;
    },

    //选择分类
    classChange(gcId) {
      this.form.gc_id = gcId;
      this.getClass(gcId, 1);
    },
    classChange1(gcId) {
      this.form.gc_id = gcId;
      this.getClass(gcId, 2);
    },
    classChange2(gcId) {
      this.form.gc_id = gcId;
      this.getClass(gcId, 3);
    },

    //获取规格
    showSpec() {
      if (this.form.gc_id != this.oldGcId) {
        this.checkedSpec = [];
        this.checkedSpecValue = [];
      }

      let params = {
        gc_id: this.form.gc_id,
        // goods_commonid:this.goodsCommonid,
      };
      if (this.form.gc_id == this.oldGcId) {
        params.goods_commonid = this.goodsCommonid;
      }
      this.$post_('goods/goods-class/get_class_spec', params, (res) => {
        console.log(res);
        if (res.code == '0') {
          this.specArr = res.data;
          if (res.extend) this.form.type_id = res.extend.type_id;
          // if(this.goodsCommonid>0){
          // 	this.specChange();
          // 	console.log(this.checkedSpecValue);
          // }
        } else {
          this.$message.warning(res.msg);
          this.specArr = [];
          this.form.type_id = 0;
        }
      });
    },
    //获取已选择的值
    formatSpecArr() {
      console.log(this.checkedSpec);
    },

    //勾选规格
    specChange() {
      let checkedSpec = [];
      console.log(this.specArr);
      this.specArr.forEach((spec, index) => {
        let checkSpecVal = [];
        let specFlag = false;
        spec.spec_value.forEach((specVal) => {
          if (specVal.checked) {
            this.$set(spec, 'checked', true);
            specFlag = true;
            let valName = {
              val_id: specVal.id,
              spec_val: specVal.value_name,
              spec_id: specVal.spec_id,
            }
            checkSpecVal.push(valName);
          }
        })
        //用于取消时
        if (!specFlag) {
          this.$set(spec, 'checked', false);
        }
        //有选中的
        if (checkSpecVal.length) {
          checkedSpec.push(checkSpecVal);
        }

        //获取选择的规格
        if (spec.checked) {
          let wasFlag = true;
          console.log(this.checkedSpec);
          this.checkedSpec.forEach((val, i) => {
            if (val.spec_id == spec.spec_id) {
              wasFlag = false;
            }
          })
          if (wasFlag) {
            let selectSpec = { spec_id: spec.spec_id, spec_name: spec.spec_name };
            this.checkedSpec[spec.spec_id] = selectSpec;
          }
        } else {
          this.checkedSpec.forEach((val, i) => {
            if (val.spec_id == spec.spec_id) {
              this.checkedSpec.splice(i, 1);
            }
          })
        }
      });
      console.log(checkedSpec);
      if (!checkedSpec.length) {
        this.checkedSpecValue = [];
        this.storageDis = false;
        return;
      }
      console.log(checkedSpec);
      let res = this.descartes(checkedSpec);
      let data = [];

      //额外增加一些参数
      if (res[0].spec_id != undefined) {
        res.forEach((val, i) => {
          val.price = 0;
          val.storage = 0;
          val = [val];
          data.push(val);
        });

      } else {
        res.forEach((val, i) => {
          console.log(val);
          val.push({ price: 0 });
          val.push({ storage: 0 });
          data.push(val);
        })
      }
      if (data.length > 0) {
        this.storageDis = true;
      }
      console.log(this.storageDis);
      this.checkedSpecValue = data;
    },

    /**
     * 生成笛卡尔积
     * @returns {*}
     */
    descartes(array) {
      if (array.length < 2) return array[0] || [];

      return [].reduce.call(array, function (col, set) {
        var res = [];
        col.forEach(function (c) {
          set.forEach(function (s) {
            var t = [].concat(Array.isArray(c) ? c : [c]);
            t.push(s);
            res.push(t);
          })
        });

        return res;
      });
    },

    //提交
    saveGoods() {
      this.ifload = true;
      if (this.checkedSpec && !this.checkedSpec[0]) {
        this.checkedSpec.splice(0, 1);
      }
      this.form.spec_name = JSON.stringify(this.checkedSpec);
      this.form.spec_value = JSON.stringify(this.checkedSpecValue);
      // console.log(this.specArr);return;
      this.$post_('goods/goods/add_step1', this.form, (res) => {
        console.log(res);
        this.ifload = false;
        if (res.code == '0') {
          this.$message.success(res.msg);
          let goodsCommonid = Number(res.data.goods_commonid);
          this.$emit('baseSuccess', goodsCommonid);
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    editPrice() {
      this.editVisible = true;
      this.editLabel = '价格';
      this.editType = 'price';
    },
    editStock() {
      this.editVisible = true;
      this.editLabel = '库存';
      this.editType = 'stock';
    },

    //批量修改价格、库存
    saveEdit() {
      // console.log(this.checkedSpecValue);
      if (this.editType == 'stock') {
        this.form.goods_storage = 0;
      }
      this.checkedSpecValue.forEach((val, index) => {
        val.forEach((v, i) => {
          if (v.price != undefined && this.editType == 'price') {
            this.checkedSpecValue[index][i].price = this.eidtVal;
          }
          if (v.storage != undefined && this.editType == 'stock') {
            this.checkedSpecValue[index][i].storage = this.eidtVal;
            this.form.goods_storage += this.eidtVal * 100 / 100;
          }
        })
      })
      this.editVisible = false;
    },
    //计算各规格库存
    caluStorage() {
      this.form.goods_storage = 0;
      this.checkedSpecValue.forEach((val, index) => {
        val.forEach((v, i) => {
          if (v.storage != undefined) {
            this.form.goods_storage += v.storage * 100 / 100;
          }
        })
      })
    }
  }
}
</script>

<style>
</style>
